<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>注册系统</title>

    <!--引入弹窗swal的CSS-->
    <link rel="stylesheet" type="text/css" href="https://blog.huangwx.cn/css/sweetalert.css">
    <script type="text/javascript" src="https://blog.huangwx.cn/js/sweetalert-dev.js"></script>

    <style type="text/css">
        html {font-size: 10px;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
        .layout {width: 100%;}
        .layout：after{content: " ";display: block;height: 0;clear: both;visibility: hidden;overflow: hidden;}
        .tonav{background: #061f41;url()center no-repeat;background-size: 100% auto;}
        .tonav .pos-tl {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);}
        .tonav nav{padding-top: 20px;padding-bottom: 20px;}
        .login_in .wrap{background-color: #fff;padding: 30px;}
        .login_in .wrap .title{color: #061f41;padding: 10px 0;border-bottom: 1px solid #bfbfbf;position: relative;font-size: 1.8rem;}
        .login_in .wrap .title:after{content: "";bottom: 0;left: 0;width: 150px;height: 2px;background-color: #061f41;}
        .login_in .wrap .title span{display: inline-block;width: 150px;text-align: center;}
        .login_in .wrap .item{width: 305px;height: 41px;margin: 31px 0 15px 0;background-color: #FFF;border: 1px solid #BFBFBF;}
        .login_in .wrap .item .ico{font-size: 1.6rem;color: #BFBFBF;padding: 0 8px;}
        .login_in .wrap input[type="text"], .login_in .wrap input[type="password"]{font-size: 1.4rem;border: none;width: 263px;height: 38px;background-color: #FFF;outline: none;}
        .login_in .wrap .item-submit{text-align: center;}
        .login_in .wrap input[type="submit"]{border: none;color: #fff;background-color: #061f41;padding: 10px 0;font-size: 1.8rem;width: 305px;}
        .login_in .wrap .dl_zidong{text-align: right;margin-bottom: 20px;vertical-align: middle;}
        .login_in .wrap .dl_zidong input {width: 16px;height: 16px;vertical-align: middle;}
        .login_in .wrap .dl_zidong span{vertical-align: middle;}
        .login_in .wrap .dl_title{display: flex;justify-content: space-between;padding-top: 10px;}
        .login_in .wrap .dl_if{color: #061f41;cursor: pointer;}
        .login_in .wrap .dl_forget{color: #6d6e71;}
        .dl_focus{
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
        }
        @media (max-width:767px) {
            .tonav{background-size: auto;}
        }
    </style>

</head>
<body style="background-color: rgb(12,6,48)">

<a href="/" class="site-logo">
    <img src="../static/img/Logo-ST.png" height="60px">
</a>

<div class="layout tonav pos-r">
    <div class="login_in pos-tl">
        <div class="wrap">
            <center><p class="pd-bottom title"><span>注册系统</span></p></center>
            <form method="post" autocomplete="off" action="/register/">
                {%csrf_token%}
                <div class="item">
                    <span class="ico i-user"></span>
                    <input type="text" name="name" value="" placeholder="请输入用户名" required="required">
                </div>
                <div class="item">
                    <span class="ico i-user"></span>
                    <input type="text" name="phone" id="phone" value="" placeholder="请输入手机号码" required="required" minlength="11" oninput="if(value.length>11)value=value.slice(0,11)" onblur="checkphone()">
                </div>
                <div class="item">
                    <span class="ico i-user"></span>
                    <input type="text" name="age" value="" placeholder="请输入年龄" required="required">
                </div>
                <div>
                    <span style="display:inline-block;font-size: medium;">请选择性别：</span>
                    <input type="radio" name="gender" id="male" value="1" />男
                    <input type="radio" name="gender" id="female" value="2" />女
                </div>
                <br/>
                <div>
                    <span style="display:inline-block;font-size: medium;">请选择职业：&nbsp;</span>
                    <select name="profession"  style="width:80px;height:30px">
                        <option value="1">学生</option>
                        <option value="2">老师</option>
                        <option value="3">程序员</option>
                        <option value="4">项目经理</option>
                        <option value="5">其他</option>
                    </select>
                </div>

                <div class="item">
                    <span class="ico i-unlock-alt"></span>
                    <input type="password" name="password1" id="password1" value="" placeholder="请输入密码" required="required" >
                </div>
                <div class="item">
                    <span class="ico i-unlock-alt"></span>
                    <input type="password" name="password2" id="password2" value="" placeholder="再次输入密码" required="required" onblur="checkpsw()">
                </div>

                <div class="item-submit">
                    <input type="submit" value="注 册"/>
                </div>

<!--                <p style="color: red;text-align: center;font-size: medium">{{ message }}</p>-->

                <div class="dl_title">
                    <a href="/" class="dl_if">返回登录</a>
                </div>
            </form>
        </div>
    </div>
</div>

<!--处理弹窗-->
<script>
    {% if messages %}
        {% for msg in messages %}
            swal('{{ msg.message }}');
        {% endfor %}
    {% endif %}
</script>

<script>
    function checkpsw() {
        if (password1.value===''||password2.value==='')
        {
            swal("密码不能为空！");
            // alert("密码不能为空");
            return false;
        }

        if(password1.value !== password2.value) {
            swal("输入密码不一致,请重新输入！");
            // alert("输入密码不一致,请重新输入");
            password1.value ='';
            password2.value ='';
            return false;
        }
    }
    function checkphone() {
        var phonenum=phone.value;
        if (!phonenum.match(/^1(3|4|5|6|7|8|9)\d{9}$/))
        {
            swal("请输入正确格式的手机号！");
            // alert("请输入正确格式的手机号！");
            phone.value ='';
            return false;
        }
        else return true;
    }

    <!--默认选择性别初始值-->
    var sex = document.getElementsByName('gender');
    for (var i = 0; i < sex.length; i++) {
        if (sex[i].value == '1') {
            sex[i].checked = 'checked';
        }
    }
</script>

</body>
</html>
